<!-- API Key 设置页面 -->
<template>
  <view class="api-key-page">
    <!-- 导航栏 -->
    <NavBar title="API Key 设置" showBack="true"></NavBar>
    
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 说明文本 -->
      <view class="description">
        <view class="desc-title">什么是API Key？</view>
        <view class="desc-content">
          API Key是用于连接成长助手AI服务的密钥，设置后可以获得更好的智能建议和分析。
        </view>
      </view>
      
      <!-- API Key输入框 -->
      <view class="input-container">
        <uni-input
          v-model="apiKey"
          placeholder="请输入您的API Key"
          type="text"
          password
          clearable
          :maxlength="100"
          @input="onInput"
        ></uni-input>
        
        <!-- 显示/隐藏密码按钮 -->
        <view class="toggle-password" @click="togglePasswordVisibility">
          <uni-icons 
            :type="showPassword ? 'eye' : 'eye-slash'"
            size="24"
            color="#999"
          ></uni-icons>
        </view>
      </view>
      
      <!-- 警告提示 -->
      <view class="warning">
        <uni-icons type="warn" size="20" color="#FF9800"></uni-icons>
        <text>请妥善保管您的API Key，不要分享给他人！</text>
      </view>
      
      <!-- 帮助链接 -->
      <view class="help-link" @click="showHelp">
        <text>如何获取API Key？</text>
        <uni-icons type="right" size="16" color="#4CAF50"></uni-icons>
      </view>
      
      <!-- 操作按钮 -->
      <view class="button-group">
        <uni-button type="default" @click="cancel" plain>取消</uni-button>
        <uni-button type="primary" @click="save">保存</uni-button>
      </view>
    </view>
  </view>
</template>

<script>
// 导入组件
import NavBar from '../../components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // API Key
      apiKey: '',
      // 是否显示密码
      showPassword: false
    }
  },
  onLoad() {
    // 从Vuex获取已保存的API Key
    this.apiKey = this.$store.state.apiKey || ''
  },
  methods: {
    // 输入框内容变化时的处理
    onInput() {
      // 这里可以添加输入验证逻辑
    },
    
    // 切换密码显示/隐藏
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword
    },
    
    // 显示帮助信息
    showHelp() {
      uni.showModal({
        title: '获取API Key',
        content: '您可以通过以下步骤获取API Key：\n1. 访问我们的官方网站\n2. 注册并登录账号\n3. 在个人中心申请API Key\n4. 将获得的API Key复制到此处',
        showCancel: false
      })
    },
    
    // 取消操作
    cancel() {
      // 返回上一页
      uni.navigateBack()
    },
    
    // 保存API Key
    save() {
      // 验证输入
      if (!this.apiKey.trim()) {
        uni.showToast({
          title: 'API Key不能为空',
          icon: 'none'
        })
        return
      }
      
      // 保存到Vuex
      this.$store.commit('setApiKey', this.apiKey)
      
      // 显示保存成功提示
      uni.showToast({
        title: '保存成功',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 返回上一页
          uni.navigateBack()
        }
      })
    }
  }
}
</script>

<style scoped>
.api-key-page {
  padding-top: 88rpx; /* 导航栏高度 */
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 30rpx;
}

.description {
  background-color: white;
  padding: 25rpx;
  border-radius: 10rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.desc-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.desc-content {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
}

.input-container {
  position: relative;
  margin-bottom: 25rpx;
}

uni-input {
  width: 100%;
  height: 90rpx;
  background-color: white;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding-right: 80rpx;
}

.toggle-password {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}

.warning {
  display: flex;
  align-items: center;
  background-color: #FFF8E1;
  border: 1rpx solid #FFE0B2;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 25rpx;
}

.warning text {
  font-size: 26rpx;
  color: #FF9800;
  margin-left: 10rpx;
}

.help-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 25rpx;
  border-radius: 10rpx;
  margin-bottom: 50rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.help-link text {
  font-size: 28rpx;
  color: #4CAF50;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.button-group uni-button {
  flex: 1;
  margin: 0 10rpx;
  height: 90rpx;
  font-size: 30rpx;
  border-radius: 10rpx;
}

.button-group uni-button[type="primary"] {
  background-color: #4CAF50;
}
</style>